<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="frame/header.jsp"></jsp:include>

<title>火车信息指南</title>
</head>

<body>

	<div class="container-fluid">
		<div id="market" class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">生活信息</a> <span class="divider">/</span></li>
					<li><a href="#">火车信息指南</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-th"></i> 火车时刻表
					</h2>

					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<div class="tabbable">
						<!-- Only required for left/right tabs -->
						<ul class="nav nav-tabs">
							<li class="active"><a href="#tab1" data-toggle="tab">车次管理</a></li>
							<li><a href="#tab2" data-toggle="tab">火车时刻查询</a></li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="tab1">
								<div id="search-form">
									<form class="form-search span8">
										<input type="text" id="searchText"
											class="input-xlarge search-query">
										<button type="button" id="searchBtn" class="btn">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
									</form>
									<div class="span4 text-right">
										<button id="newBtn" class="btn btn-primary">添加车次</button>
									</div>
								</div>
								<table id="userInfo" class="table table-striped table-bordered ">
									<thead>
										<tr>
											<th>序号</th>
											<th>车次</th>
											<th>始发站</th>
											<th>终点站</th>
											<th>始发时间</th>
											<th>终点到达时间</th>
											<th>里程（公里）</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>G93高速动车</td>
											<td>郑州</td>
											<td>广州南</td>
											<td>08:00</td>
											<td>22:00</td>
											<td>1000</td>
											<td>
												<a href="javascript:edit({{userId}})"><i class="icon-edit"></i></a> 
												&nbsp;&nbsp;
												<a href="javascript:del({{userId}})"><i class="icon-minus"></i></a>
											</td>
										</tr>
									</tbody>
								</table>
								<div id="mypager" class="mypager"></div>
							</div>
							<div class="tab-pane" id="tab2">
								<div id="search-form">
									<form class="form-search span9">
										出发站：<input type="text" id="searchText"
											class="input-large search-query"> 到达站：<input
											type="text" id="searchText" class="input-large search-query">
										<button type="button" id="searchBtn" class="btn">&nbsp;&nbsp;查询&nbsp;&nbsp;</button>
									</form>
									<div class="span3 text-right">
										<button id="newTimeBtn" class="btn btn-primary">添加时刻</button>
									</div>
								</div>
								<table id="userInfo" class="table table-striped table-bordered ">
									<thead>
										<tr>
											<th>序号</th>
											<th>车次</th>
											<th>出发站</th>
											<th>到达站</th>
											<th>发车时间</th>
											<th>到达时间</th>
											<th>参考票价</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>G93高速动车</td>
											<td>郑州</td>
											<td>广州南</td>
											<td>08:00</td>
											<td>13:39</td>
											<td>¥656</td>
											<td><a href="javascript:edit({{userId}})"><i
													class="icon-edit"></i></a> &nbsp;&nbsp; <a
												href="javascript:del({{userId}})"><i class="icon-minus"></i></a></td>
										</tr>
									</tbody>
								</table>
								<div id="mypager" class="mypager"></div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!--/fluid-row-->

	</div>
	<!--/.fluid-container-->

	<jsp:include page="frame/scripts.jsp"></jsp:include>
	<script type="text/javascript">
		var userInfo = Tempo.prepare("userInfo");//用户信息
		var curPage = 1;//当前页
		var search = '';//搜索串

		$(document).ready(function() {

			//加载信息列表
			loadPages(curPage);

			$("#newBtn").click(function() {
				//跳转至新增页面
				window.location.href = '<c:url value="/admin/addTrain" />';
			})
			
			$("#newTimeBtn").click(function(){
				//跳转至新增页面
				window.location.href = '<c:url value="/admin/addTrainTime" />';
			})

		})

		function loadPages(currentPage) {
			$.ajax({
				url : 'users/pagelist',
				dataType : 'json',
				data : {
					pageNum : currentPage,
					search : $("#searchText").val()
				},
				success : function(data) {
					curPage = data.pageNum;
					userInfo.render(data.result);
					if (data.totalPage <= 1) {
						$("#mypager").hide();
					} else {
						$("#mypager").show();
					}
					$('#mypager').bootstrapPaginator({
						currentPage : data.pageNum,
						totalPages : data.totalPage,
						numberOfPages : data.numPerPage,
						onPageChanged : function(event, oldPage, newPage) {
							loadPages(newPage);
						}
					});
				}
			})
		}

		function del(id) {
			if (confirm("Are you sure you want to destroy it?")) {
				$.ajax({
					url : '<c:url value="/admin/user/del/'+id+'" />',
					dataType : 'json',
					data : {
						pageNum : curPage
					},
					success : function(data) {
						userInfo.render(data.result);
						refreshPages(data);
					}
				})
			}
		}

		function refreshPages(data) {
			if (data.totalPage == 1) {
				$("#mypager").hide();
			}
			$('#mypager').bootstrapPaginator({
				currentPage : data.pageNum,
				totalPages : data.totalPage,
				numberOfPages : data.numPerPage
			});
		}
		
	</script>
</body>
</html>
